<template>
  <div :style="{'height':windowsHeight-65+'px',...userStore.themeColor}">
    <div :style="{'height':windowsHeight-115+'px','overflow-x': 'hidden','overflow-y': 'auto'}" style="">
      <a-row v-if="datas && datas.length>0" :gutter="20" :style="{ marginBottom: '20px' }">
        <a-col :title="item.foldername" v-for="(item,index) in datas" :key="index" :span="3" style="text-align: center;margin: 8px;">
          <a-image @click="opencollect(item)" width="80px" :src="folderpng" :preview="false"/>
          <div class="textellipsis">{{ item.foldername }}</div>
        </a-col>
      </a-row>
      <div v-else>
        <a-empty :style="{'margin-top':(windowsHeight-185)/3+'px'}" description="暂无有效数据"/>
      </div>
    </div>
    <div class="pageshow">
      <a-pagination
          :total="parmar.total"
          :page-size="parmar.pageSize"
          size="mini"
          show-total
          @change="change"
          show-jumper/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import folderpng from "../../assets/文件夹.png"
import UseWindowsInfo from "../../hooks/UseWindowsInfo";
import {useUserStore} from "../../store/user";
import {onMounted, onUnmounted, reactive, ref} from "vue";
import Cx_Bus from "../../common/Utils/MittUtils";
import {RequestUtils} from "../../common/Utils/RequestUtils";
import {FolderType} from "../../common/Type/FolderType";
import route from "../../route";

const {windowsHeight} = UseWindowsInfo()
const userStore = useUserStore()
const datas = ref<FolderType[]>()
// 搜索条件
const parmar = reactive({
  pageNo: 1,
  pageSize: 35,
  pages: 1,
  keyword: "",
  ispage: true,
  args: {},
  total: 1,
})

/**
 * 获取用户的文件夹
 * @constructor
 */
const LoadData = ()=>{
  RequestUtils({
    url:"Folder/GetUserFolder",
    method:"post",
    data:parmar
  }).then(result=>{
    const d = result as any
    parmar.pageNo = d.current
    parmar.total = d.total
    parmar.pageSize = d.size
    parmar.pages = d.pages
    datas.value = d.records as FolderType[]
  })
}
/**
 * 页码发生改变
 */
const change = (current): void => {
  parmar.pageNo = current
  LoadData()
}
/**
 * 跳转到我的收藏夹页内
 * @param item
 */
const opencollect = (item:FolderType):void =>{
  route.push({name:"MyCollect",query:{folderType:item.uuid as string}})
}

onMounted(() => {
  // 开启监听
  Cx_Bus.on("Tool-Search", (keywordvalue) => {
    parmar.keyword = keywordvalue
    LoadData()
  })
  Cx_Bus.on("Tool-AddFolderOk",()=>{
    LoadData()
  })
  LoadData()
})
onUnmounted(() => {
  // 关闭监听
  Cx_Bus.off("Tool-Search")
  Cx_Bus.off("Tool-AddFolderOk")
})
</script>

<style scoped>
.pageshow {
  height: 50px;
  line-height: 50px;
  padding: 0 8px;
  margin: 0 auto;
}
</style>
